<!DOCTYPE html>
<html>
<head>
  <meta charset='utf-8'>
  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  <title>Page Title</title>
  <meta name='viewport' content='width=device-width, initial-scale=1'>
</head>
<body>
  <canvas id="cvs" height="30" width="200"></canvas>
  <audio id="audio" src="./assets/audio.mp3"></audio>

  <script type="importmap">
    {
      "imports": {
        "Audio": "../dist/index.js"
      }
    }
  </script>
  
  <script type="module">
    import { AudioCanvas } from 'Audio'

    let audioCanvas
    const audioDom = document.getElementById('audio')

    function open() {
      const cvsDom = document.getElementById('cvs')
      
      audioCanvas = new AudioCanvas(cvsDom, audioDom, {
        draw: {
          type: 'strip'
        }
      })
    }

    document.addEventListener('click', () => {
      if (!audioCanvas) {
        open()
        audioDom.play();
      }
    })
    
  </script>
</body>
</html>